<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
	<title>案例管理</title>
	<script src="${ctx}/static/jquery-sortable/ui.core.js" type="text/javascript"></script>
	<script src="${ctx}/static/jquery-sortable/ui.sortable.js" type="text/javascript"></script>
	<link href="${ctx}/static/jquery-sortable/css/base.css" type="text/css" rel="stylesheet" />
	<link href="${ctx}/static/jquery-sortable/css/demos.css" type="text/css" rel="stylesheet" />
	<link href="${ctx}/static/jquery-sortable/css/common.css" type="text/css" rel="stylesheet" />
<script>
	var flag='${listsize}';
	var frameIndex = '${listsize}';
	var imgFlag=0;
	var textFlag=0;
	var actionId = '${actionId}';
	
	$(document).ready(function(){
		$("#inputForm").validate({
			rules: {
				casesName: {
					required:true,
					rangelength:[1,50]            
				},
				casesTitle:{
					required:true,
					rangelength:[1,100] 
				},
				casesDesc:{
					required:true,
					rangelength:[1,512] 
				}
 			},
       		messages: {
       			casesName: {
					required:"案例名称不能为空！",
					rangelength:jQuery.format("案例名称位数必须在{0}到{1}字符之间！")
				},
				casesTitle: {
					required:"案例标题不能为空！",
					rangelength:jQuery.format("案例标题位数必须在{0}到{1}字符之间！")
				},
				casesDesc: {
					required:"案例说明不能为空！",
					rangelength:jQuery.format("案例说明位数必须在{0}到{1}字符之间！")
				}
 			}
		});
		
		if(flag=="" || flag ==null || flag == undefined){
			flag = 0;
		}
		if(frameIndex=="" || frameIndex ==null || frameIndex == undefined){
			frameIndex = 0;
		}
		$(".curFrameTxt").each(function(index,domEle){
			var html = "<font size='4' color='#3C88D6'>第</font>";
			index = index+1;
			html = html+index;
			$(domEle).html(html);
		});
		$(".mmsFrame").each(function(index,domEle){
			$(domEle).attr("value",index+1);
		});
  		
		function vali(){
			var flg = true;
			$(".numberStyle").each(function(index,domEle){
				var val = $(domEle).val();
				if(val=="" || val==null || val==undefined){
					alert("案例文本内容不能为空!");
					flg = false;
					return false;
				}
			});
			$(".checkImg").each(function(index,domEle){
				var imgval = $(domEle).val();
				if(imgval=="" || imgval==null || imgval==undefined){
					alert("案例图片不能为空!");
					flg = false;
					return false;
				}
			});
			
			return flg;
		}
		 function checkFilesize(){
			var options  = { 
            	url:"${ctx}/cases/cases/checkFilesize",
                type:'post',
                success:showdata
           }; 
          	$("#inputForm").ajaxSubmit(options);
		} 
		
		function showdata(data){
			if(data.indexOf("true")>-1){
            	alert("您上传的图片总和超过案例限制，大小总额应为50K！");
            	return false;
            }else{
            	var rightFrame = parent.document.getElementById("rightFrame");
            	var url;
            	if(actionId==1)
				{
					url = "${ctx}/cases/cases/save/";
					
				}
				if(actionId==2)
				{
					url = "${ctx}/cases/cases/update/";
				}
            	var options  = { 
	            	url:url,
	                type:'post',
	                success:function(data){
            			if(data.indexOf("true")>-1){
			            	alert("添加案例成功！");
			            }
            			if(data.indexOf("false")>-1){
			            	alert("修改案例成功！");
			            }
            			rightFrame.src = "${ctx}/cases/cases";
	                }
	           }; 
	          	$("#inputForm").ajaxSubmit(options);
            }
		}
		getFrameHeight();
		
		//内容提交
		$(".finishMms").click(function(){
			if($("#inputForm").valid()){
				if(!vali()){
					return false;
				}
				checkFilesize();
			}
		})
		//排序拖拽
		$("#sortable").sortable({
  			stop: function(event, ui) {
  				$(".curFrameTxt").each(function(index,domEle){
					var html = "<font size='4' color='#3C88D6'>第</font>";
					index = index+1;
					html = html+index;
					$(domEle).html(html);
				});
  				$(".mmsFrame").each(function(index,domEle){
					$(domEle).attr("value",index+1);
				});
  				
  			}
		});
		
		$("#sortable").disableSelection();
		var spotMax = 100;
		if($('div.txtArea').size() >= spotMax) {$(obj).hide();}
		
		$(".delFrame").click(function(){
			removeFrame($(this));
		});
	
		function removeFrame(obj){
			obj.parent().parent().remove();
			$(".curFrameTxt").each(function(index,domEle){
				var html = "<font size='4' color='#3C88D6'>第</font>";
				index = index+1;
				html = html+index;
				$(domEle).html(html);
			});
			$(".mmsFrame").each(function(index,domEle){
				$(domEle).attr("value",index+1);
			});
			getFrameHeight();
		}
	
		// add frame
        $(".upFrame").click(function(){
			frameIndex++;
			var curframIndex = $(".curFrameTxt:last").text();
			curframIndex = curframIndex.substring(1);
			curframIndex++;
			var txtAreaId = "txtArea"+ frameIndex;
			var imgAreaId = "imgArea"+ frameIndex;
			var newFrame = $(this).parent().before("<div id='frame"+ frameIndex +"' class='frameDiv ui-state-default'>" +
								"<input type='hidden' class='frameIds' name='frameIds' value='"+frameIndex+"'/>"+
								"<div class='areaBtn'><input type='button' name='addTxtArea' class='addTxtArea' id='"+txtAreaId+"' value=''/>&nbsp;&nbsp;" + 
								"<input type='button' name='addImgArea' class='addImgArea'  id='"+ imgAreaId+"' value='' /></div>&nbsp;&nbsp;" +
								"<div class='frameBtn'><button name='delFrame' class='delFrame'  title='删除当前帧'></button></div>" +
								"<input type='hidden' name='casesInfoList["+(curframIndex-1)+"].casesFramenum' class='mmsFrame' value="+curframIndex+">"+
								"<div class='curFrameTxt'><font size='4' color='#3C88D6'>第</font>"+curframIndex+"</div>"+
							"</div>")
			$("#" + txtAreaId).click(function(){
				addText($(this),curframIndex-1);
			});
			$("#" + imgAreaId).click(function(){
				addImg($(this),curframIndex-1);
			});
			$(".delFrame").click(function(){
				removeFrame($(this));
				
			})
			getFrameHeight();
			return false;
		})
	});
	//=====================add Txt Area==========================
	var textframeid;
	function addText(thisObject,infoIndex,update){
		flag++;
		var frameid = thisObject.parent().parent().find("input.frameIds").val();
		if(textframeid!=frameid){
			textFlag=0;
		}
		if(update!="" && update !=null && update != undefined && update=="update"){
			var rs = document.getElementById("casesInfoList["+infoIndex+"].txtCasesContent.resType")
			if(rs!="" && rs !=null && rs != undefined){
				textFlag=1;
			}	
		}
		if(textFlag>0){
			alert("文本域只允许添加一项");
			return false;
		}
		textframeid = frameid;
		thisObject.parent().append(
			'<div class="txtArea">' +
				'<div class="mmsConContent">' +
				'<textarea id="casesInfoList['+infoIndex+'].txtCasesContent.resContent"'+
				' name="casesInfoList['+infoIndex+'].txtCasesContent.resContent" cols="25" rows="8" class="numberStyle"></textarea>' +
				'<input type="hidden" id=""casesInfoList['+infoIndex+'].txtCasesContent.resType" ' +
				'name="casesInfoList['+infoIndex+'].txtCasesContent.resType" value="txt"/></div>' +
				'<div class="delContent"><input type="button" class="remove" value="" /></div>' +
			'</div>')
		.find("input.remove").click(function(){
			removeText($(this));
		});
		getFrameHeight();
		textFlag++;
	};
		
	
		//=====================add Img Area======================
	var imgframeid;
	function addImg(thisObject,infoIndex,update){
		flag++;
		var frameid = thisObject.parent().parent().find("input.frameIds").val();
		if(imgframeid!=frameid){
			imgFlag = 0;
		}
		if(update!="" && update !=null && update != undefined && update=="update"){
			var rs = document.getElementById("casesInfoList["+infoIndex+"].imgCasesContent.resType")
			if(rs!="" && rs !=null && rs != undefined){
				imgFlag=1;
			}	
		}
		if(imgFlag>0){
			alert("图片域只允许添加一项");
			return false;
		}
		imgframeid = frameid;
		var mmsContent = thisObject.after(
			'<div class="imgArea">' +
			'<div class="mmsConContent"><div style="float:left;"><span style="color:red">上传本地</span>' +
			'<input type="file" style="width:150px" name ="casesInfoList['+infoIndex+'].imgCasesContent.file" id='+ "f"+flag+' size="35" onchange="viewImg('+flag+',this)">' +
			'<input type="button" class="selButton " onclick="pop(this)" style="width:60px" name ="'+"button"+ flag+'" id='+ "sel"+flag+' size="35" value="共享文件">'+
			'</div></div>'+
			'<input type="hidden" name="'+frameid+'" value ="'+"image"+flag+'" id='+ "f"+flag+' size="35" />' +
			'<div class="delContent"><input type="button" id="removeImg" class="removeImg" onclick="removeImgDiv(this)" value="" /></div><br /><br />' +
			'<div class="img newPrv" id='+ "imgView"+flag+'><img id="'+"casesImageContent"+flag+'" class="mmsImageContentTemplate" ' +
			'src="${ctx}/static/jquery-sortable/image/defaultImg.png" width="120px" height="120px" /></div>'+
			'<input type="hidden" name="casesInfoList['+infoIndex+'].imgCasesContent.resourcesId" id="'+"resources"+flag+'" value="" />' +
			'<input type="hidden" name="check" class="checkImg" id="'+"check"+flag+'" value="" />' +
			'<input type="hidden" id="casesInfoList['+infoIndex+'].imgCasesContent.resType" name="casesInfoList['+infoIndex+'].imgCasesContent.resType" value="img"/>' +
			'</div>')
		
		getFrameHeight();
		imgFlag++;
	}
	function setImagePreview(fileObj, previewObj, localImg) {
		var rightFileType = new Array("jpg","gif","jpeg","JPG");
		var fileType = $("#"+fileObj).val().substring($("#"+fileObj).val().lastIndexOf(".") + 1);  
		if (!in_array(fileType,rightFileType)) {  
			alert("只支持jpg,gif,jpeg格式图片上传！");
			resetFileInput($("#"+fileObj));
			return;
		}
		var docObj=document.getElementById(fileObj);
		var imgObjPreview=document.getElementById(previewObj);
		if(docObj.files && docObj.files[0]){
			imgObjPreview.style.display = 'block'; 
			imgObjPreview.style.width = '80px';       
			imgObjPreview.style.height = '80px';  
			var reader = new FileReader();
			reader.onload = function(evt){ 
				imgObjPreview.src = evt.target.result;
			}
			reader.readAsDataURL(docObj.files[0]);
		}else{        
			//IE下，使用滤镜        
			docObj.select();
			var imgSrc = document.selection.createRange().text;
			var localImagId = document.getElementById(localImg);        
			//必须设置初始大小       
			localImagId.style.width = "80px";
			localImagId.style.height = "80px";        
			//图片异常的捕捉，防止用户修改后缀来伪造图片       
			try{
				localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
				localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
			}catch(e){
				alert("您上传的图片格式不正确，请重新选择!");
				return false;
			}        
			imgObjPreview.style.display = 'none';
			document.selection.empty();
		}
		return true;
	}

	//弹出窗口
	function pop(obj){
		var val = obj.id.substr("sel".length,obj.id.length);
		$.colorbox({
			iframe:true, 
			width:"80%",
			height:"60%",
			href:"${ctx}/cases/resources/pop/"+val,
			close:"关闭",
			overlayClose:true
		});
	}
	
	function viewImg(flag,obj){
		var rightFileType = new Array("jpg","gif","jpeg","png","JPG");
		var fileType = obj.value.substring(obj.value.lastIndexOf(".") + 1);  
		if (!in_array(fileType,rightFileType)) {  
			alert("只支持jpg,gif,jpeg,png格式图片上传！");
			resetFileInput($(obj));
			return;
		}
		var imgView = document.getElementById("imgView"+flag);
		if(obj.files && obj.files[0]){
			imgView.style.width = "120px";
			imgView.style.height = "120px";
			var reader = new FileReader();
			reader.onload = function(evt){
				$("#casesImageContent"+flag).attr({src :evt.target.result});
			}
			reader.readAsDataURL(obj.files[0]);
		}else{
			$(imgView).children(".mmsImageContentTemplate").css("display","none");
			imgView.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").enabled  = true;
			imgView.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(obj).val();
			imgView.style.width = "120px";
			imgView.style.height = "120px";
		}
		$("#check"+flag).attr("value","true");
		$("#resources"+flag).attr("value","");
	}
	
	function resetFileInput(file){   
	    file.after(file.clone().val(""));   
	    file.remove();   
	}  
	
	
	function removeText(obj){
		obj.parent().parent().remove();
		getFrameHeight();
		textFlag--;
	}
		
	
	function removeImgDiv(obj){
		$(obj).parent().parent().remove();
		getFrameHeight();
		imgFlag--;
	}
	
	function close(obj,serial){
		$("#caseImageContent"+serial).show();
		var imgView = document.getElementById("imgView"+serial);
		$("#casesImageContent"+serial).attr("src","${ctx}/cases/resources/viewPhoto/"+obj);
		$("#resources"+serial).attr("value",obj);
		$("#check"+serial).attr("value","true");
		resetFileInput($("#f"+serial));
		jQuery().colorbox.close(); 
	}
	
	function bak(){
		window.location.href = "${ctx}/cases/cases";
	}

	function in_array(needle, haystack) {
	  	var type = typeof needle;  
	   	if(type == 'string' || type =='number') {  
	        for(var i in haystack) {  
	            if(haystack[i] == needle) {  
	                return true;  
	           }  
	        }  
	   }  
	   return false;  
	}  
	
</script>
<style type="text/css"> 
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 98%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	#sortable li span { position: absolute; margin-left: -1.3em; }
	.newPrv {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);}
	.controls label{
		display:inline-block;
	}
	.form-horizontal .control-group{margin-bottom:18px;*zoom:1}
	.control-group{margin-top:18px;-webkit-margin-top-collapse:separate}
	.control-label{float:left;width:140px;padding-top:5px;text-align:right}
	.controls{*display:inline-block;*padding-left:20px;margin-left:160px;*margin-left:0}
	.controls:first-child{*padding-left:160px}
	.input-xlarge{
		display: inline-block;
		width: 280px;
		height: 18px;
		padding: 4px;
		margin-bottom: 9px;
		font-size: 13px;
		line-height: 18px;
		color: #555;
		background-color: #fff;
		border: 1px solid #ccc;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px
	}

	textarea {
		overflow: auto;
		vertical-align: top
	}
	.btn{
	display:inline-block;
	*display:inline;
	padding:4px 10px 4px;
	margin-bottom:0;
	*margin-left:.3em;
	font-size:13px;
	line-height:18px;
	*line-height:20px;
	color:#333;
	text-align:center;
	text-shadow:0 1px 1px rgba(255,255,255,0.75);
	vertical-align:middle;
	cursor:pointer;
	background-color:#f5f5f5;
	*background-color:#e6e6e6;
	background-image:-ms-linear-gradient(top,#fff,#e6e6e6);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
	background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);
	background-image:-o-linear-gradient(top,#fff,#e6e6e6);
	background-image:linear-gradient(top,#fff,#e6e6e6);
	background-image:-moz-linear-gradient(top,#fff,#e6e6e6);
	background-repeat:repeat-x;border:1px solid #ccc;
	*border:0;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	border-color:#e6e6e6 #e6e6e6 #bfbfbf;
	border-bottom-color:#b3b3b3;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);
	filter:progid:dximagetransform.microsoft.gradient(enabled=false);
	*zoom:1;
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)
	}
	</style>
</head>

<body>
   <div>
     <div id="jCrumbs" class="breadCrumb module">
		<ul>
	        <li>
	            <a href="#"><i class="icon-home" style="margin-top: 2px;"></i></a>
	        </li>
	        <li>
	            	案例管理
	        </li>
	         <li>
	            <a href="${ctx}/cases/cases">案例列表</a>
	        </li>
	        <li>
	            	案例编辑
	        </li>
	    </ul>
	</div>					                    
		<div class="row-fluid">
  			<div class="span12">
  			<div style="float:right">
				<button class="btn" type="button"  onclick="bak()">返 回</button>
			</div>	
       		<h3 class="heading"><strong style="font-size: 18">案例信息</strong></h3>
				<div class="row-fluid">
					<div class="span8">
						<form:form id="inputForm" name="inputForm" modelAttribute="cases" cssClass="form-horizontal"
									action="" method="post" enctype="multipart/form-data">
							<input type="hidden" name="casesId" id="casesId" value="${cases.casesId}"/>
							<input type="hidden" name="createDateStr" id="createDateStr" value="${cases.createDateStr}"/>
							<input type="hidden" name="createBy" id="createBy" value="${cases.createBy}"/>
							<fieldset>
								<div class="control-group formSep">
									<label for="u_fname" class="control-label"><font color="red">*</font>案例名称:</label>
									<div class="controls">
										<input type="text" id="casesName" name="casesName" class="input-xlarge" value="${cases.casesName}" />
									</div>
								</div>
								<div class="control-group formSep">
									<label for="u_fname" class="control-label"><font color="red">*</font>案例标题:</label>
									<div class="controls">
										<c:if test="${actionId==1}">
											<input type="text" id="casesTitle" name="casesTitle" class="input-xlarge" value="" />
										</c:if>
										<c:if test="${actionId==2}">
											<input type="text" id="casesTitle" name="casesTitle" class="input-xlarge" value="${cases.casesTitle}" />
										</c:if>
									</div>
								</div>
								<div class="control-group formSep">
										<label for="fileinput" class="control-label">
											<font color="red">*</font>案例封面:
										</label>
										<div class="controls">
											<div data-fileupload="image"
												class="fileupload fileupload-new">
												<div style="width: 80px; height: 80px;" id="localImag"
													class="fileupload-new thumbnail">
													<img id="preview" width=-1 height=-1 style="diplay: none" />
												</div>
												<input type="file" class="input-xlarge" name="file"
													id="file"
													onchange="setImagePreview('file','preview','localImag');" />

											</div>
										</div>
									</div>
								<div class="control-group formSep">
									<label for="u_signature" class="control-label"><font color="red">*</font>说明:</label>
									<div class="controls">
										<textarea rows="4" style="height: 75px" id="casesDesc" name="casesDesc"class="input-xlarge">${cases.casesDesc}</textarea>
									</div>
								</div>
								<c:if test="${cases.status=='R'}">
									<div class="control-group formSep">
										<label for="u_signature" class="control-label">审核意见:</label>
										<div class="controls text_line">
											<strong>${cases.auditDesc}</strong>
										</div>
									</div>
								</c:if>
							</fieldset>
							<div class="oneMms">
							 	<div class="conTitle"><img src="${ctx}/static/jquery-sortable/image/icon_01.png" />&nbsp;&nbsp;编辑案例内容</div>
							         <table width="70%" border="0" cellspacing="0" cellpadding="0" class="stripe_tb">
							             <div id="sortable">
							             	<c:forEach items="${cases.casesInfoList}" var="infoContent" varStatus="info">
							          			<div id="frame${info.index}" class="frameDiv ui-state-default">
													<input type="hidden" class="frameIds" name="frameIds" value="${info.index}"/>
														<div class="areaBtn">
															<input type="button" name="addTxtArea" class="addTxtArea" onclick="addText($(this),${info.index},'update')"  id="txtArea${info.index}" value=""/>&nbsp;&nbsp;
															<input type="button" name="addImgArea" class="addImgArea" onclick="addImg($(this),${info.index},'update')" id="imgArea${info.index}" value="" />
															<c:if test="${infoContent.imgCasesContent!=null}">
																<div class="imgArea">
																	<div class="mmsConContent">
																		<div style="float:left;">
																			<span style="color:red">上传本地</span>
																				<input type="file" style="width:150px" name ="casesInfoList[${info.index}].imgCasesContent.file" 
																					id="f${info.index}" size="35" onchange="viewImg('${info.index}',this)">
																				<input type="button" style="width:60px" class="selButton" onclick="pop(this)"  name ="button${info.index}"
																					id="sel${info.index}" size="35" value="共享文件">
																		</div>
																	</div>
																	<input type="hidden" name="frameid" value ="image${info.index}" id="f${info.index}" size="35" />
																	<div class="delContent">
																		<input type="button" id="removeImg" class="removeImg" onclick="removeImgDiv(this)" value="" /></div><br /><br />
																	<div class="img newPrv" id="imgView${info.index}">
																		<img id="casesImageContent${info.index}" class="mmsImageContentTemplate" 
																				src="${ctx}/cases/cases/viewImg/${infoContent.imgCasesContent.casesContentId}" width="120px" height="120px" />
																	</div>
																	<input type="hidden" name="casesInfoList[${info.index}].imgCasesContent.resourcesId" id="resources${info.index}" value="${infoContent.imgCasesContent.resourcesId}" />
																	<input type="hidden" name="check" class="checkImg" id="check${info.index}" value="true" />
																	<input type="hidden" id="casesInfoList[${info.index}].imgCasesContent.resType" name="casesInfoList[${info.index}].imgCasesContent.resType" value="img"/>
																</div>
															</c:if>
															<c:if test="${infoContent.txtCasesContent!=null}">
																<div class="txtArea"> 
																	<div class="mmsConContent">
																		<textarea id="casesInfoList[${info.index}].txtCasesContent.resContent"
																			name="casesInfoList[${info.index}].txtCasesContent.resContent" cols="25" rows="8" class="numberStyle">${infoContent.txtCasesContent.resContentStr}</textarea>
																		<input type="hidden" id="casesInfoList[${info.index}].txtCasesContent.resType"
																			name="casesInfoList[${info.index}].txtCasesContent.resType" value="txt"/>
																	</div>
																	<div class="delContent">
																		<input type="button" class="remove" onclick="removeText($(this))" value="" />
																	</div>
																</div>
															</c:if>
														</div>&nbsp;&nbsp;
														<div class="frameBtn">
															<button name="delFrame" class="delFrame" title="删除当前帧"></button>
														</div>
															<input type="hidden" name="casesInfoList[${info.index}].casesFramenum" class="mmsFrame" value="${info.index+1}">
														<div class="curFrameTxt"></div>
												</div>
							          		</c:forEach>
							          		<div style="margin-top:8px; margin-bottom:4px;">
							          			<button class="upFrame"></button>
							          			<input type="button" name="finishMms"   class="finishMms" />
							          		</div>
							          	</div>
							         </table>
							     </div>
						</form:form>
					</div>
				</div>
   			</div>
		</div>
        </div>
</body>
</html>
